<section>
    <h1 class="blue"><i class="ace-icon fa fa-file-o grey"></i> Example Files</h1>
    <hr/>

    <div class="help-content">
        <ul class="info-list list-unstyled">
            <li>
                I've included some examples which you can find inside <b>examples</b> folder.
                <br/>
                Some have a server side handler in PHP language.
                <br/>
                Unfortunately I'm not much familiar with other languages and environments to provide examples for.
                <br/>
                But if you would like to see more examples, just let me know.

                <div class="hr hr-12 hr-double"></div>
                Currently example files are:

                <ol class="spaced2 margin-20">
                    <li>
                        File upload example.
                        <br/>
                        <code>examples/file-upload.html</code>
                        <br/>
                        <code>examples/file-upload.php</code>
                        <br/>
                        Fore more info, you can also see <a class="help-more" href="#custom/file-input">file input
                        element</a>.

                    </li>

                    <li>
                        Profile image update.
                        <br/>
                        The server side code is same as above <code>examples/file-upload.php</code>
                        <br/>
                        If you want to try this on profile page, you should
                        edit profile page, remove the section that says:
                        <code><span class="green">// ***UPDATE AVATAR HERE*** //</span></code>
                        and use the contents of <code>examples/js/profile-avatar-update.js</code> instead.
                    </li>

                    <li>
                        Treeview example which uses FuelUX treeview element.
                        <br/>
                        In this example data is loaded from a sqlite database
                        <code>examples/data/treeview-city.sqlite</code> and some items are randomly pre-selected.
                        <br/>
                        For instance in your app you may want to display a tree and restore user's previous selection.
                        <br/>
                        Fore more info, you can also see <a class="help-more" href="#plugins/fuelux.treeview">treeview
                        plugin</a>.
                    </li>

                    <li>
                        Widget Box example which show usage of events and function.
                        <br/>
                        You can refer to <a class="help-more" href="#custom/widget-box">widget box section</a> for more
                        info.
                    </li>

                    <li>
                        Wysiwyg example of saving editor's content inside a textarea element and posting it to server.
                        <br/>
                        Fore more info please also see <a class="help-more" href="#plugins/editor.wywiwyg">wysiwyg
                        editor</a>.
                    </li>
                </ol>
            </li>
        </ul>

    </div>
</section>